<template>
  <FilmList :key="'film' + list.length" :type="0" :list="list" @get-more-data="getnowPlaying"></FilmList>
  </template>
  
  <script setup lang="ts">
  import { onMounted, ref } from "vue";
  import { nowPlayingListData } from "../api/api";
  import $bus from "../config/eventBus";
  
  // 导入电影列表的相关关键属性数据
  import { ListType } from "../types/index";
  
  // 导入电影列表组件
  import FilmList from "../components/FilmList.vue";
  
  $bus.emit("tabBarHide", true)
  
  const page = ref<string>("1");
  let list = ref<Array<ListType>>([]);
  
  const getnowPlaying = async () => {
    const ret = await nowPlayingListData(page.value);
    console.log(ret);
    list.value = [...list.value, ...ret.data.films];
    page.value = (parseInt(page.value) + 1).toString();
  }
  
  onMounted(() => {
    // 这种封装，在其他页面使用的时候，都会非常的方便
    getnowPlaying();
  });
  </script>